<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <script src="./js/dracula/jquery-1.4.2.min.js"></script>
        <script src="./js/kineticJS/kinetic-v4.0.3.min.js"></script>
        <script src="./js/dracula/raphael-min.js"></script>
        <script src="./js/dracula/dracula_graffle.js"></script>
        <script src="./js/dracula/dracula_graph.js"></script>
        <!-- 
            TODO: remove me please! 
            <script src="./js/boardGraph.js"></script>
        -->
        <script src="./js/unit.js"></script>
        <script src="./js/scenarios.js"></script>
        <script src="./js/terrains.js"></script>
        <script src="./js/terrainDatabase.js"></script>
        <script src="./js/boardSetup.js"></script>
        <script src="./js/imageLoader.js"></script>
        <script src="./js/player.js"></script>
        <script src="./js/game.js"></script>
        <script src="./js/utils.js"></script>
        <script>
            
            window.onload = function() {
                var scenario = Hasl.Scenarios.Vierville;
                //var gameInterface = Hasl.GameInterface();
                mGameInterface.startScenario(scenario, false);
                drawUnits(mGameInterface, mGameInterface.getUnitLayer(), mGameInterface.getImageLoader());
                mGameInterface.draw();
            };
            
            // TODO: units should be stored in some sort of database
            //       drawing should be just one aspect
            //       additional data should appear on screen (context sensitive)
            //       concerning movement, los, range, etc...
            //       Obviously a unit object of some sort is necessary!
            function drawUnits(game, unitLayer, imageLoader) 
            {
                // TODO: associate the unit positions with the BoardGraph
                // TODO: convert unit position on BoardGraph to position on board (screen)
                // we'll want to treat groups of units differently
                addUnit(game, unitLayer, imageLoader.getImage(imageLoader.getDatabase().german_1_e_hs), 25, 34);
                addUnit(game, unitLayer, imageLoader.getImage(imageLoader.getDatabase().german_1_e_hs), 20, 27);
                addUnit(game, unitLayer, imageLoader.getImage(imageLoader.getDatabase().american_2_e_fs), 37.5*2, 60);
            }
            function addUnit(game, unitLayer, imageFromLoader, posX, posY)
            {
                var size = 36;
                var halfSize = size * 0.5;
                var unit = new Kinetic.Image({
                    width: size,
                    height: size,
                    offset: {x: -halfSize, y: -halfSize},
                    x: posX,
                    y: posY,
                    image: imageFromLoader,
                    id: imageFromLoader.src
                });
                var selectedUnit = game.getSelectedUnit();
                // this should only be done for groups...
                unit.on('mousemove', function() {
                    document.body.style.cursor = "pointer";
                    unit.moveToTop(); 
                    
                    unitLayer.draw();
                });
                unit.on('click', function() {
                    var selected = game.getSelectedUnit()
                    if(selected)
                    {
                        selected.setShadow({
                            color: 'transparent',
                            blur: 3,
                            offset: [3, 3],
                            opacity: 0.5
                        });
                        selected.setScale([1,1]);
                    }
                    var unitUnSelected = (selected == unit);
                    if(unitUnSelected)
                    {
                        $('#selectedUnit').attr('src', '');
                        game.setSelectedUnit(undefined);
                        return;
                    }
                    selectedUnit = unit;
                    selectedUnit.setScale([1.1,1.1]);
                    selectedUnit.setShadow({
                        color: 'black',
                        blur: 3,
                        offset: [3, 3],
                        opacity: 0.5
                    });
                    unitLayer.draw();
                    
                    $('#selectedUnit').attr('src', unit.getId())
                    game.setSelectedUnit(selectedUnit);
                });
            unit.on('mouseout', function(){
                document.body.style.cursor = "default"; 
            });
            unitLayer.add(unit);
        }
        function scaleStage()
        {
            var size = stage.getSize();
            stage.setSize(stageScalar*size.width, stageScalar*size.height);
            stage.setScale(stageScalar);
            stage.draw();

            size = stage.getSize();
        }
        function zoomIn()
        {
            if(stageScalar < 1.25)
            {
                stageScalar += 0.25;
                scaleStage();
               
                $('#zoomOut').removeAttr('disabled');
                if(stageScalar < 1.25)
                {
                    $('#zoomIn').attr('disabled','disabled');
                }
            }
            else
            {
                $('#zoomIn').attr('disabled','disabled');
            }
        }
        function zoomOut()
        {
            if(stageScalar > 0.75)
            {
                stageScalar -= 0.25;
                scaleStage();
                
                $('#zoomIn').removeAttr('disabled');
                if(stageScalar > 0.75)
                {
                    $('#zoomOut').attr('disabled','disabled');
                }
            }
            else
            {
                $('#zoomOut').attr('disabled','disabled');
            }
            
        }
        </script>
    </head>
    <body>
        <div id="container"></div>
<!--        <div id="controls">
            <button id="zoomIn" onclick="zoomIn();">+</button>
            <button id="zoomOut" onclick="zoomOut();">-</button>
            <br>
        </div>-->
        <div id="reinforcements"></div>
        <div id="info">
            <img id="selectedUnit" src=""/>
            <p id="terrainInfo"></p>
        </div>
    </body>
</html>